<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="wangbo">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- <link rel="stylesheet" type="text/css" href=""/> -->
		<title> </title>
	</head>
	<body>
		<div id="app">

		</div>

		<script type="text/javascript" src="../js/react.development.js"> </script>
		<script type="text/javascript" src="../js/react-dom.development.js"> </script>
		<script type="text/javascript" src="../js/prop-types.js"> </script>
		<script type="text/javascript" src="../js/babel.min.js"> </script>
		<script type="text/babel">
			// 数据放到哪个组件
		// 需要看组件是某个组件需要(直接给他),还是全部的组件都需要(直接给父组件)
			class App extends React.Component {
				constructor(props) {
					super(props)
					this.state={
						arr:['吃饭','睡觉','看美女']
					}
					this.addarr = this.addarr.bind(this);
				}
				addarr(val){
					let {arr} = this.state;
					arr.unshift(val);
					this.setState({arr})
				}
				render(){
					return(
						<div>
						<h1>组合的联系静态数据</h1>
						<Add addarr={this.addarr} count={this.state.arr.length} />
						<List arr={this.state.arr}/>
						</div>
					)
				}
			}
			class Add extends React.Component {
				constructor(props) {
					super(props)
					this.myadd=this.myadd.bind(this);
				}
				myadd(){
					let val = this.inputv.value.trim();
					if(!val){
						return;
					}
					this.props.addarr(val)
					// 清除输入
					this.inputv.value = ''
				}
				render(){					
					return(
						<div>
							<input type="text" ref={input=>this.inputv = input} />
							<button type="button" onClick={this.myadd} >按钮#{this.props.count}</button>
						</div>
					)
				}
			}
			// 规定的传来的值得内容
			Add.propTypes={
				count:PropTypes.number.isRequired,
				addarr:PropTypes.func.isRequired	
			}
			class List extends React.Component {
				constructor(props) {
					super(props)
				}
				
				render(){
					return(
						<ul>
							{this.props.arr.map((myli,index)=> <li key={index}> {myli}</li>)}
						</ul>
					)
				}
			}
			// 规定的传来的值得内容
			List.propTypes={
				arr:PropTypes.array.isRequired					
			}
			ReactDOM.render(<App/>,document.getElementById('app'))
		</script>
	</body>
</html>
